<template>
  <div class="wages">
    <el-row>
      <el-button icon="el-icon-plus" @click="dialogVisibleadd = true"
        >添加</el-button
      >
      <el-button icon="el-icon-delete" @click="dele">删除</el-button>
    </el-row>
    <el-table
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
      height="calc( 100vh - 200px )"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column fixed="left" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="xiugai(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="InterestYear"
        label="年度"
        show-overflow-tooltip
        width="130"
      />
      <el-table-column
        prop="Demandrate"
        label="活期利率"
        show-overflow-tooltip
        width="130"
      >
        <!-- <template slot-scope="scope">{{
          number_format(scope.row.AvgSocialWage, 2)
        }}</template> -->
      </el-table-column>
      <el-table-column
        prop="Fixedrate"
        label="定期利率"
        show-overflow-tooltip
        width="130"
      >
        <!-- <template slot-scope="scope">{{
          number_format(scope.row.AvgSocialWage, 2)
        }}</template> -->
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="clear"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="年度">
          <el-input v-model="inputyear" placeholder="请输入年度" />
        </el-form-item>
        <el-form-item label="活期利率">
          <el-input v-model="inputmoney" placeholder="请输入年度利率" />
        </el-form-item>
        <el-form-item label="定期利率">
          <el-input v-model="inputmoneyfix" placeholder="请输入年度利率" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisibleadd"
      width="30%"
      :before-close="clear"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="年度">
          <el-input v-model="addinputyear" placeholder="请输入年度" />
        </el-form-item>
        <el-form-item label="活期利率">
          <el-input v-model="addinputmoney" placeholder="请输入年度利率" />
        </el-form-item>
        <el-form-item label="定期利率">
          <el-input v-model="addinputmoneyfix" placeholder="请输入年度利率" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleadd = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseadd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  API_NDLL_CHA,
  API_NDLL_GAI,
  API_NDLL_ADD,
  API_NDLL_DEL,
} from "../../api/example";
export default {
  name: "",
  data() {
    return {
      msg: "年度利率设置",
      dialogVisible: false,
      dialogVisibleadd: false,
      labelPosition: "right",
      tableData: [],
      multipleSelection: [],
      /* 修改 */
      inputyear: "",
      inputmoney: "",
      id: "",
      inputmoneyfix: "",
      /* 新增 */
      addinputyear: "",
      addinputmoney: "",
      addinputmoneyfix: "",
    };
  },
  methods: {
    clear() {
      this.dialogVisible = false;
      this.dialogVisibleadd = false;
      this.inputyear = "";
      this.inputmoney = "";
      this.addinputyear = "";
      this.addinputmoney = "";
      this.addinputmoneyfix = "";
      this.inputmoneyfix = "";
      this.id = "";
    },
    xiugai(row) {
      this.inputyear = row.InterestYear;
      this.inputmoney = row.Demandrate;
      this.inputmoneyfix = row.Fixedrate;
      this.id = row.ID;
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dele() {
      this.$confirm("确认删除？")
        .then((_) => {
          let data = this.multipleSelection.map((item) => {
            return {
              Id: item.ID,
            };
          });
          if (data.length != 0) {
            API_NDLL_DEL(data)
              .then((res) => {
                console.log(res);
                this.submit();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.warning("未识别到数据！");
          }
        })
        .catch((_) => {
          console.log("aaa");
        });
    },
    handleClose() {
      this.$confirm("确认修改？")
        .then((_) => {
          // done();
          let data = {
            Id: this.id,
            InterestYear: this.inputyear,
            Demandrate: this.inputmoney,
            Fixedrate: this.inputmoneyfix,
          };
          if (this.inputmoney < 1 && this.inputmoneyfix < 1) {
            API_NDLL_GAI(data)
              .then((res) => {
                console.log(res);
                this.$message.success("修改成功!");
                this.dialogVisible = false;
                this.submit();
                this.clear();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.warning("利率必须小于1！");
          }
        })
        .catch((_) => {});
    },
    handleCloseadd() {
      this.$confirm("确认增加？")
        .then((_) => {
          // done();
          // this.dialogVisibleadd = false;
          let data = {
            InterestYear: this.addinputyear,
            Demandrate: this.addinputmoney,
            Fixedrate: this.addinputmoneyfix,
          };
          if (this.addinputmoney < 1 && this.addinputmoneyfix < 1) {
            API_NDLL_ADD(data)
              .then((res) => {
                console.log(res);
                this.$message.success("新增成功!");
                this.dialogVisibleadd = false;
                this.submit();
                this.clear();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.warning("利率必须小于1！");
          }
        })
        .catch((_) => {});
    },
    printText() {
      this.$router.push("/projectinfo/print");
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    submit() {
      API_NDLL_CHA()
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList.sort(this.compare("InterestYear"));
        })
        .catch((err) => {
          console.log(err);
        });
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style scoped lang="scss">
.wages {
  box-sizing: border-box;
  padding: 30px;
  max-width: 1200px;
  .el-row {
    text-align: left;
  }
  .el-table {
    margin-top: 10px;
  }
}
</style>
